<template>
	<view class="message">
		<!-- tabs -->
		<view class="message_tabs">
			<view class="message_tabs_item" :class="{select:item?.text === selectText}" v-for="item in list"
				:key="item?.text" @click="handleTabChange(item)">
				<text class="message_tabs_item_text">{{item?.text}}</text>
				<text class="message_tabs_item_badge" v-if="item?.num">{{item?.num}}</text>
				<text class="message_tabs_item_line" v-if="selectText === item?.text"></text>
			</view>
		</view>
		<!-- 内容 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" class="message_view" @scrolltolower="scrolltolower">
			<template v-if="selectText === '获赞'">
				<!-- 点赞 -->
				<view class="message_view_like" v-for="item in dataSouseLike" :key="item?.id"
					@click="handleComment(item)">
					<image :src="item?.avatar" class="message_view_like_left" v-if="item?.avatar"></image>
					<image src="http://qianxueapplet.suoeryun.com/avatar.png"
						class="message_view_like_left" v-else></image>
					<view class="message_view_like_right">
						<text>{{item?.realname}}</text>
						<view>赞了你的{{item?.likeType === '4'?'动态':'评论'}}<text>{{item?.fromToday}}</text></view>
					</view>
				</view>
				<u-empty v-if="!dataSouseLike.length" marginTop="100" text="暂无获赞" icon="http://qianxueapplet.suoeryun.com/xx.png"></u-empty>
			</template>
			<template v-if="selectText === '回复评论'">
				<!-- 回复 -->
				<view class="message_view_reply" v-for="item in dataSouseComment" :key="item?.id"
					@click="handleComment(item)">
					<image :src="item?.avatar" class="message_view_reply_left" v-if="item?.avatar"></image>
					<image src="http://qianxueapplet.suoeryun.com/avatar.png"
						class="message_view_reply_left" v-else></image>
					<view class="message_view_reply_centre">
						<view>{{item?.realname}}<text class="message_view_reply_centre_margin">回复了我的评论</text></view>
						<view>
							<text>回复内容：</text>{{item?.content}}
							<text class="message_view_reply_centre_margin font12">{{item?.fromToday}}</text>
						</view>
					</view>
					<!-- <view class="message_view_reply_right">这次研学活动太棒了！！！</view> -->
					<image :src="item?.imagesUrl" class="message_view_reply_right"></image>
				</view>
				<u-empty v-if="!dataSouseComment.length" marginTop="100" text="回复评论" icon="http://qianxueapplet.suoeryun.com/xx.png"></u-empty>
			</template>
			<template v-if="selectText === '通知公告'">
				<!-- 系统通知 -->
				<view class="message_view_notice" @click="handleClick('mine/messageDetails',item)"
					v-for="item in dataSouseAnno" :key="item?.id">
					<view class="message_view_notice_title">{{item?.title}}</view>
					<view class="message_view_notice_subtitle">{{item?.pushTime}}</view>
					<image src="http://qianxueapplet.suoeryun.com/newNotice.png"
						class="message_view_notice_cornermark" v-if="item?.unread == 0"></image>
				</view>
				<u-empty v-if="!dataSouseAnno.length" marginTop="100" text="通知公告" icon="http://qianxueapplet.suoeryun.com/xx.png"></u-empty>
			</template>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, unref } from 'vue';
	import { onShow } from "@dcloudio/uni-app";
	import { queryCommentPageList, queryLikePageList, qxNoticeAnnoList, queryNumberList } from "@/config/mine.api";
	import { queryIsMedia } from "@/config/index.api";

	const list = ref([{ text: '获赞', num: 0 }, { text: '回复评论', num: 0 }, { text: '通知公告', num: 0 }]);
	const selectText = ref('获赞');

	const status = ref('loadmore');
	// 参数
	const params = ref({ type: '1' });
	const triggered = ref(false);
	const scrollTop = ref(0);

	// 分页计数-获赞
	const paginationLike = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	const dataSouseLike = ref([]);

	// 分页计数-评论
	const paginationComment = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	const dataSouseComment = ref([]);

	// 分页计数-公告
	const paginationAnno = reactive({ pageNo: 1, total: 0, pageSize: 15 });
	const dataSouseAnno = ref([]);

	onShow(() => {
		loadMessageNum();
	})

	onMounted(async () => {
		paginationLike.pageNo = 1;
		paginationComment.pageNo = 1;
		paginationAnno.pageNo = 1;
		triggered.value = false;
		loadData();
	})

	/**
	 * 未读消息个数
	 */
	async function loadMessageNum() {
		const res = await queryNumberList({});
		// 消息数量
		list.value[1]['num'] = Number(res?.commentNum);
		list.value[2]['num'] = Number(res?.annoNum);
	}
	/**
	 * 根据类型加载数据
	 */
	function loadData() {
		const text = unref(selectText);
		if (text === '获赞') {
			loadDataLike();
		} else if (text === '回复评论') {
			loadDataComment();
		} else if (text === '通知公告') {
			loadDataAnno();
		}
	}

	/**
	 * 加载数据-获赞
	 */
	async function loadDataLike() {
		if (paginationLike.pageNo === 1) {
			dataSouseLike.value = [];
		}
		status.value = 'loading';
		const res = await queryLikePageList({ ...paginationLike });
		triggered.value = false;
		paginationLike.total = res?.total;
		dataSouseLike.value?.push(...res?.records);
		if (unref(dataSouseLike)?.length < paginationLike.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}


	/**
	 * 加载数据-评论
	 */
	async function loadDataComment() {
		if (paginationComment.pageNo === 1) {
			dataSouseComment.value = [];
		}
		status.value = 'loading';
		const res = await queryCommentPageList({ ...paginationComment });
		triggered.value = false;
		paginationComment.total = res?.total;
		dataSouseComment.value?.push(...res?.records);
		if (unref(dataSouseComment)?.length < paginationComment.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}


	/**
	 * 加载数据-通知公告
	 */
	async function loadDataAnno() {
		if (paginationAnno.pageNo === 1) {
			dataSouseAnno.value = [];
		}
		status.value = 'loading';
		const res = await qxNoticeAnnoList({ ...paginationAnno });
		triggered.value = false;
		paginationAnno.total = res?.total;
		dataSouseAnno.value?.push(...res?.records);
		if (unref(dataSouseAnno)?.length < paginationAnno.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * tabs 切换监听
	 */
	function handleTabChange(item) {
		const text = item?.text;
		selectText.value = text;
		if (text === '获赞') {
			if (dataSouseLike.value?.length === 0) {
				loadDataLike();
			}
		} else if (text === '回复评论') {
			if (dataSouseComment.value?.length === 0) {
				loadDataComment();
			}
		} else if (text === '通知公告') {
			if (dataSouseAnno.value?.length === 0) {
				loadDataAnno();
			}
		}
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower(e) {
		const text = unref(selectText)
		if (text === '获赞') {
			if (unref(dataSouseLike)?.length < paginationLike.total) {
				paginationLike.pageNo++;
				loadData();
			}
		} else if (text === '回复评论') {
			if (unref(dataSouseComment)?.length < paginationComment.total) {
				paginationComment.pageNo++;
				loadData();
			}
		} else if (text === '通知公告') {
			if (unref(dataSouseAnno)?.length < paginationAnno.total) {
				paginationAnno.pageNo++;
				loadData();
			}
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		loadMessageNum();
		const text = unref(selectText)
		if (text === '获赞') {
			paginationLike.pageNo = 1;
		} else if (text === '回复评论') {
			paginationComment.pageNo = 1;
		} else if (text === '通知公告') {
			paginationAnno.pageNo = 1;
		}
		loadData();
	}

	/**
	 * 点击跳转-活动详情
	 */
	function handleClick(path, item) {
		console.log(path);
		--list.value[2]['num'];
		item.unread = null;
		uni.$u.route('/pages/' + path, { id: item?.id });
	}

	/**
	 * 跳转活动详情/视频/图集
	 */
	async function handleComment(item) {
		console.log(item, 'sdf');
		if (item?.type === '1') {//活动
			const data = await queryIsMedia({ id: item?.belongId });
			if (data == '1') {
				uni.$u.route('/pages/index/acitvityImgVideoDetails', {
					id: item?.belongId,
					orderId: item?.orderId
				});
			} else {
				uni.$u.route('/pages/index/acitvityDetails', {
					id: item?.belongId,
					orderId: item?.orderId
				});
			}
		} else if (item?.type === '4' || item?.likeType === '4') {//圈子
			uni.$u.route('/pages/circle/circleDetails', {
				id: item?.belongId,
				orderId: item?.orderId
			});
		} else {//视频/图集
			uni.$u.route('/pages/index/videoSet', {
				id: item?.belongId,//活动id
				imgvideoId: item?.activityId,//视频或图片id
				orderId: item?.orderId,//评论id
				type: item?.type === '2' ? '1' : '2',
				title: item?.type === '2' ? '图集' : '视频集'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		.message_tabs {
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			align-items: center;
			height: 96rpx;
			font-size: 28rpx;

			.message_tabs_item {
				display: flex;
				flex-direction: column;
				position: relative;
				align-items: center;
				padding: 0 78rpx;

				&.select {
					color: #FF943C;
				}

				.message_tabs_item_text {
					line-height: 96rpx;
				}

				.message_tabs_item_line {
					width: 32rpx;
					height: 6rpx;
					background-color: #FF943C;
					position: absolute;
					bottom: 0;
				}

				.message_tabs_item_badge {
					display: inline-block;
					border-radius: 100%;
					background-color: #D54941;
					color: #fff;
					position: absolute;
					top: 20rpx;
					right: 60rpx;
					font-size: 20rpx;
					width: 30rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
				}
			}
		}

		.message_view {
			height: calc(100vh - 24rpx - 96rpx);
			margin-top: 24rpx;

			// 点赞
			.message_view_like {
				background-color: #fff;
				margin-bottom: 6rpx;
				padding: 24rpx;
				display: flex;
				align-items: center;

				.message_view_like_left {
					width: 96rpx;
					height: 96rpx;
					margin-right: 18rpx;
					border-radius: 50%;
				}

				.message_view_like_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 28rpx;

					&>text {
						color: #333333;
						font-weight: 500;

					}

					&>view {
						margin-top: 22rpx;
						color: #666666;

						&>text {
							color: #999999;
							font-size: 24rpx;
							display: inline-block;
							margin-left: 8rpx;
						}
					}
				}
			}

			// 回复
			.message_view_reply {
				background-color: #fff;
				margin-bottom: 6rpx;
				padding: 24rpx;
				display: flex;
				align-items: center;

				.message_view_reply_left {
					width: 96rpx;
					height: 96rpx;
					margin-right: 18rpx;
					border-radius: 50%;
				}

				.message_view_reply_centre {
					font-size: 28rpx;
					line-height: 45rpx;
					flex: 1;

					&>view {
						color: #333333;

						&>text {
							color: #999999;
						}

						.message_view_reply_centre_margin {
							margin-left: 8rpx;
						}

						.font12 {
							font-size: 24rpx;
						}
					}
				}

				.message_view_reply_right {
					// width: 108rpx;
					// color: #999999;
					// font-size: 24rpx;
					// line-height: 36rpx;		
					margin-left: 56rpx;
					width: 112rpx;
					height: 136rpx;

				}
			}

			// 系统通知
			.message_view_notice {
				margin: 0 20rpx 20rpx 20rpx;
				background-color: #fff;
				padding: 32rpx 40rpx;
				position: relative;

				.message_view_notice_title {
					color: #333333;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 50rpx;
					overflow: hidden; // 溢出隐藏
					text-overflow: ellipsis; // 溢出用省略号显示
					display: -webkit-box; // 作为弹性伸缩盒子模型显示。
					-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
					-webkit-line-clamp: 2; // 显示的行数
					height: 95rpx;
					word-wrap: break-word;
				}

				.message_view_notice_subtitle {
					color: #999999;
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 6rpx;
				}

				.message_view_notice_cornermark {
					position: absolute;
					top: 0px;
					right: 0;
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}
</style>